<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../static/js/axios.js"></script>
    <link rel="shortcut icon" href="../static/imgs/cms.png" type="image/x-icon">
    <title>重置密码</title>
    <link rel="stylesheet" type="text/css" href="../static/css/ForgetPwd.css">
    <script src="../static/js/jQuery.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="input-box">
<div class="title-box">
    重置密码
</div>
    <div class="info-box">
        <div class="info-title">
            新密码
        </div>
        <div class="info-input">
            <label>
                <input type="password" id="input-pwd" placeholder="请输入新密码">
            </label>
        </div>
    </div>
    <div class="info-box">
        <div class="info-title">
            确认密码
        </div>
        <div class="info-input">
            <label>
                <input type="password" id="input-confirm" placeholder="请确认密码">
            </label>
        </div>
    </div>
    <div class="info-box">
        <div class="info-title">
            邮箱
        </div>
        <div class="info-input">
            <label>
                <input type="text" id="input-mail" placeholder="请输入QQ邮箱">
            </label>
            <span class="send-code"><a href="#" id="send_code" class="codestyle">点击发送验证码</a></span>
        </div>
    </div>
    <div class="info-box" style="margin-bottom: -10px">
        <div class="info-title">
            验证码
        </div>
        <div class="info-input">
            <label>
                <input type="text" id="input-code" placeholder="请输入验证码">
            </label>
        </div>
    </div>
    <div class="info-box">
        <div class="confirm-btn-box">
            <button class="confirm-btn">确认重置</button>
        </div>
    </div>
    <div class="return-login-box">
        重置成功？<a href="#" class="return-login-btn">返回登录界面</a>
    </div>

</div>
<script>
    let interval;
    $(function () {

    })
    /*返回登录界面*/
       $(".return-login-btn").click(function () {
               location.href="login.html";
       })

    /*发送验证码*/
    $(".codestyle").click(function () {
        const patt = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(patt.test($("#input-mail").val()))
        {
            let x = 60;
            send();
            $(".codestyle").attr("disabled", true).css("pointer-events", "none");
            interval = setInterval(function () {
               $(".codestyle").html(x+"秒后重新发送")
                x--;
                if (x === -1) {
                     $(".codestyle").html("点击发送验证码");
                    clearInterval(interval);
                    $(".codestyle").attr("disabled", false).css("pointer-events", "auto");
                }
            }, 1000);
        }else{
             alert("邮箱格式错误！！！")
        }
    })

    /*确认重置*/
    $(".confirm-btn").click(function () {
        const patt = /^([a-zA-Z0-9]){5,12}$/;
        if(patt.test($("#input-pwd").val()))
        {
            if($("#input-pwd").val()===$("#input-confirm").val())
            {
                submit();
            }else{
                alert("两次密码输入不一致！！！");
            }

        }else{
              alert("密码必须由5-12位的字母或数字组成！");
        }
    })

    /*提交重置密码请求*/
    function submit() {
        let url='http://localhost:8080/userServlet?action=reset_pwd'
        axios({
            method:'GET',
            url:url,
            params:{
                 new_pwd:$("#input-pwd").val(),
                 mailbox:$("#input-mail").val(),
                 code:$("#input-code").val(),
            },
        }).then(function (response) {
            console.log(response);
            alert(response.data.message);
            /*密码重置成功，清空数据*/
            if(response.data.code===200){
                $("#input-pwd").val("");
                $("#input-confirm").val("");
                $("#input-mail").val("");
                $("#input-code").val("");
                $(".codestyle").html("点击发送验证码");
                clearInterval(interval);
                $(".codestyle").attr("disabled", false).css("pointer-events", "auto");
            }
        })
    }

    /*向后端发送邮箱验证码请求*/
    function send() {
        let url='http://localhost:8080/userServlet?action=send_code'
        axios({
            method:'GET',
            url:url,
            params:{
                mailbox:$("#input-mail").val()
            },
        }).then(function (response) {
            console.log(response);
            alert(response.data.message);
        })
    }
</script>
</body>
</html>